<template>
  <div class="tag-factory factory-calculate-config calculate-config-content">
    <div class="calculate-list-wrap clearfix">
      <factory-config-list
        ref="factoryConfigList"
        @addItem="addItem"
        @clearConfig="clearConfig"
        :preview="false"
      ></factory-config-list>
      <div class="calculate-list">
        <div class="list-title"><icon-svg name="iconFunc"></icon-svg> 函数（fx）</div>
        <el-input v-model="keyword" placeholder="输入搜索关键字" @keyup.native.enter="search">
          <i class="el-icon-close" slot="suffix" @click="clearSearch" v-if="keyword.length"></i>
          <el-button slot="append" @click="search"><icon-svg name="iconSearch"></icon-svg></el-button>
        </el-input>
        <ul class="calculate-func-list tag-scrollbar">
          <li v-for="item in funcList" :key="item.funcId" draggable @dragstart="copyDrag($event, item)">
            <div class="func-name">{{ item.funcExpression }}</div>
            <div class="list-handler">
              <el-tooltip effect="dark" content="添加" placement="top" :enterable="false">
                <span class="plus" @click="addFunc(item)"><i class="el-icon-plus"></i></span>
              </el-tooltip>
              <el-tooltip effect="dark" placement="top" :content="item.funcDeclaration" :enterable="false">
                <icon-svg name="iconEvent"></icon-svg>
              </el-tooltip>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <calculate-content ref="calculateContent" :logicalList="logicalList"></calculate-content>
  </div>
</template>

<script>
import factoryConfigList from '../../factory/factory-config-list'
import calculateContent from './calculate-content'
export default {
  components: {
    factoryConfigList,
    calculateContent
  },
  data() {
    return {
      keyword: '',
      operatorListCopy: [],
      operatorList: []
    }
  },
  created() {
    this.getOperator()
  },
  computed: {
    logicalList() {
      return this.operatorList.filter(item => item.funcType === 1)
    },
    funcList() {
      return this.operatorList.filter(item => item.funcType === 2)
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.query.tagId) {
        this.$refs.calculateContent.getDetail(this.$route.query.tagId)
      }
      this.$refs.calculateContent.setGroup(this.$route.query.groupId)
    })
  },
  methods: {
    getOperator() {
      this.$ajax({
        url: this.$ajax.setUrl('der/derCalculationFunction/getDerCalculationFunction'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.operatorListCopy = Array.from(data.data)
          this.operatorList = Array.from(data.data)
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    search() {
      this.operatorList = this.keyword.trim().length
        ? this.operatorList.filter(
            item => item.funcType === 1 || item.funcExpression.toLowerCase().includes(this.keyword.toLowerCase())
          )
        : Array.from(this.operatorListCopy)
    },
    clearSearch() {
      this.keyword = ''
      this.search()
    },
    addItem(item) {
      if (!this.$refs.calculateContent.preview)
        this.$refs.calculateContent.addItem(Object.assign({}, item, { type_id: '1', isDerLabel: item.isDerLabel }))
    },
    addFunc(item) {
      if (!this.$refs.calculateContent.preview)
        this.$refs.calculateContent.addItem(Object.assign({}, item, { type_id: '2' }))
    },
    copyDrag(event, item) {
      event.dataTransfer.setData('type_id', '2')
      event.dataTransfer.setData('func_config', JSON.stringify(item))
    },
    getCatalogClass() {
      return this.$refs.factoryConfigList.getCatalogClass()
    },
    clearConfig() {
      this.$refs.calculateContent.clearConfig()
    },
    changeCatalogClass(catalogClassId) {
      this.$refs.factoryConfigList.changeCatalogClass(catalogClassId)
    }
  }
}
</script>

<style lang="scss">
@import '../../factory/factory.scss';
@import './calculate.scss';
.calculate-config-content {
  .factory-content {
    margin-left: 650px !important;
  }
}
</style>
